<template>
  <div>
    <Header />
    <!-- 商品详情开始 -->
    <div class="detail">
      <!-- 左侧开始 -->
      <div class="left">
        <img :src="bImg" alt="" />
        <div class="left_img">
          <img :class="item.active ? 'active' : ''" v-for="(item,index) of data.img" :key="index" @mouseenter="changeImg(index)" :src="item.img" alt="" />
        </div>
      </div>
      <!-- 左侧结束 -->
      <!-- 右侧开始 -->
      <div class="right">
        <h3>{{data.title}}</h3>
        <span class="info_text">{{data.xl}}</span>
        <span class="info_text1"
          >{{data.type}}</span
        >
        <div class="info_detail">
          <div class="detail_item">
            <div class="item_div">
              <span class="item_p">售价</span>
              <div class="price">
                <span class="price_item"
                  >￥{{data.price}} <span>市场价<s>￥{{data.d_price}}</s></span></span
                >
                <span class="xl">
                  已售<span>13.91万</span>件
                </span>
              </div>
            </div>
            <div></div>
          </div>
          <span class="hy">花语</span>
          <span class="detail_title"
            >{{data.hy}}</span
          >
          <span class="hy">材料</span>
          <span class="detail_title"
            >{{data.cl}}</span
          >
          <span class="hy">包装</span>
          <span class="detail_title"
            >{{data.bz}}</span
          >
        </div>
        <span class="hy">配送说明</span>
        <span class="detail_title"
          >限送100多个主要城市的市区及近郊：北京,上海,深圳,广州,成都,武汉,南京</span
        >
        <!-- 选择开始 -->
        <span class="hy">选择</span>
        <span class="detail_title pro">
          <div class="pro_item" @click="changeXz(index)" v-for="(item,index) of data.xz" :key="index" :class="item.active ? 'active' : ''">
            <img :src="item.img" alt="" />
            <span>{{item.text}}</span>
            <i v-if="item.active" class="iconfont iconxuanzhongjiaobiao"></i>
          </div>
        </span>
        <!-- 选择结束 -->
        <!-- 加入购物车开始 -->
        <div class="shop">
          <el-button round @click="addShopcar"
            ><i class="iconfont icongouwuche"></i>加入购物车</el-button
          >
          <el-button round class="btn">立即购买</el-button>
          <span class="sc"><i class="iconfont iconshoucang1"></i>收藏商品</span>
        </div>

        <!-- 加入购物车结束 -->
      </div>
      <!-- 右侧结束 -->
    </div>
   
    <!-- 商品详情结束 -->
  </div>
</template>
<script>
import Header from "../components/header";
export default {
  data() {
    return {
      data:'',
      bImg:'',
    };
  },
  components: { Header },
  mounted() {
    this.getList()
  },
  methods: {
    a(){
      let obj = {id:3,name:'小王',age:22}
      this.list = [obj,...this.list]
    },
    addShopcar(){     
      let {type,price,d_price,id} = this.data      
      let obj={
        type,
        id,
        price,
        d_price,
        img:this.bImg,
        count:1,
      }     
      this.$store.commit('appShopcar',obj)                
      this.$router.push('/shopcar')
    },
   getList(){
      let id = this.$route.params.id
      this.axios.post('/detail',{id:id}).then(res => {
        console.log(res)
        this.data = res.data.info
        this.bImg = this.data.img[0].img
      })
    },
    changeImg(i){
      this.data.img.map((item,index) => {
        if(index == i){
          item.active=true
          this.bImg = item.img
        }else{
          item.active=false
        }
      })
    },
    changeXz(i){
      this.data.xz.map((item,index) => {
        if(index == i){
          item.active = true
        }else{
          item.active = false
        }
      })
    }
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/detail.scss";
</style>
